<!--  / warpper  -->
<main class="warpper">

    <div class="aboutSec1">
        <div class="aboutSec1_con">
            <img src="__CDN__/static/images/logo2.png" alt="">
            {$about_config.content1}
        </div>
    </div>

    <div class="aboutSec2">
        <div class="aboutSec2_con">
            <div class="aboutSec2_img">
                <img src="__CDN__{$about_config.image2}" alt="" width="100%">
            </div>
            <div class="aboutSec2_txt">
                {$about_config.content2}
            </div>
        </div>
    </div>

    <div class="aboutSec3">
        <div class="aboutSec3_con">
            <div class="aboutSec3_video">
                <img style="visibility: hidden;" src="__CDN__{$about_config.video_image3}" alt="">
                <video controls reload width="100%" poster="__CDN__{$about_config.video_image3}">
                    <source src="__CDN__{$about_config.video3}" type="video/mp4">
                </video>
                <div class="videoPlay">
                    <img src="__CDN__/static/images/play2.png" alt="">
                </div>
            </div>
            <div class="aboutSec3_box">
                <div class="aboutSec3_txt">
                    {$about_config.content3}
                </div>
                <div class="aboutSec3_img">
                    <img src="__CDN__{$about_config.image3}" alt="" width="100%">
                </div>
            </div>
        </div>
    </div>

    <div class="aboutSec4">
        <div class="container">
            <ul class="aboutSec4_list">
                <li>
                    <div class="aboutSec4_img">
                        <img src="__CDN__{$about_config.image4}" alt="" width="100%">
                    </div>
                    <div class="aboutSec4_txt">
                        {$about_config.content4}
                    </div>
                </li>
            </ul>
        </div>
    </div>

</main>
<!--  / warpper  -->

<script>
    $(function () {

        // 视频鼠标点击播放视频
        $('body').on('click', '.aboutSec3_video', function () {
            $(this).toggleClass('play');
            if ($(this).hasClass('play')) {
                $(this).find('video').trigger('play');
            } else {
                $(this).find('video').trigger('pause');
            }
        })

    })

    // 滚动图片放大、文字出现
    function bodyScroll() {
        var height = $('.aboutSec2').height();
        var top = $(window).scrollTop() - $('.aboutSec2').offset().top;
        if (top > ($(window).height() / -1.3) && top < height - ($(window).height() / 1.3)) {
            $('.aboutSec2_img').css('width', (100 - ((top * -1) / height * 100)) + '%');
            $('.aboutSec2_txt').css('transform', 'translate(-50%, ' + ((top * -1) / height * 100) + '%)')
            $('.aboutSec2_txt').css('opacity', ((top * 1) / height) + 1)
        } else if (top < ($(window).height() / -1.3)) {
            $('.aboutSec2_img').css('width', '30%');
        } else if (top > height - ($(window).height() / 1.3)) {
            $('.aboutSec2_img').css('width', '100%');
            $('.aboutSec2_txt').css('transform', 'translate(-50%, -50%')
            $('.aboutSec2_txt').css('opacity', 1)
        }
    }

    $(window).ready(function () {
        $('.headerNav:last-child li').eq(0).addClass('on');
    })
    $(window).load(function () {
        // 滚动图片放大、文字出现
        bodyScroll();

        if ($(window).width() <= 768) {
            $('.aboutSec1,.aboutSec2,.aboutSec3').addClass('on');
        }
    })
    $(window).resize(function () {

    })

    $(window).scroll(function () {
        var h = $(window).scrollTop()
        // 滚动图片放大、文字出现
        bodyScroll();

        for (var i = 0; i < $('.aboutSec4_list li').length; i++) {
            if (h > $('.aboutSec4_list li').eq(i).offset().top - $(window).height() / 1.3) {
                $('.aboutSec4_list li').eq(i).addClass('on');
            }
        }
    })

</script>
